<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="./js/react.16.4.js"></script>
    <script src="./js/react-dom.16.4.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.min.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <!--<script src=" ./js/babel.min.js"></script>-->
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>

<script type="text/babel">

    // todo 组件首字母大写
    // todo 样式 class 要用className
    // todo React 数字不需要带单位
    //todo 参数在this.props 中

    // 事件首字母小写 驼峰
    class Buttion1 extends React.Component {
        handleClick() {  //  todo 事件处理
            alert("this is handclick")
        }

        static defaultProps = {
            btnname: "this is default props name"
        }

        render() {
            return ( // todo this.handleClick 事件
                <div onClick={this.handleClick} className="btn btn-default">{this.props.btnname}</div>
            )
        }
    }

    let checkStateClcik=(b)=> {
        if (b){
            return "已选中"
        }else{
            return "未选中"
        }
    };

    class CheckBox extends React.Component {
        constructor(props) {
            super(props);
            this.state = {isCheck: false} // todo 初始化state中的值
            // this.handleClick = this.handleClick.bind(this) // todo 绑定点击事件的方法,这里不写 下面 调用位置就必须要写
        }

        handleClick() {
            this.setState({
                isCheck: !this.state.isCheck
            })
        }

        render() {
            // let text = this.state.isCheck ? "已选中" : "未选中"; // todo 这里只能使用三目
            let text = checkStateClcik(this.state.isCheck) // todo if else只能在 外层函数使用
            return (
                <div>
                    <input type="checkbox" onChange={this.handleClick.bind(this)}/>{text}
                </div>
            );
        }
    }

    class Groups extends React.Component {
        render() {
            return (
                <div>
                    <Buttion1/>
                    <CheckBox/>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Groups/>,
        document.getElementById("example")
    )

</script>
</body>

</html>